<template>
  <div id="main" :data-circle-pie-cid="cid" class="chart" />
</template>

<script>
import { ChartMixin } from '../../../components/mixin'
export default {
  mixins: [ChartMixin],
  props: {
    data: {
      type: Array,
      // required: true,
      default: function() {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      newData: [],
      nameList: ['生物', '物理', '化学', '地理', '政治', '历史']
    }
  },
  watch: {
    data(newData, OldData) {
      console.log('watch', newData, OldData)
      this.setOptions(newData)
    }
  },
  methods: {
    setOptions(newData) {
      console.log('options', this.data)
      const option = {
        title: {
          text: this.title
        },
        label: {
          normal: {
            show: false
          }
        },
        toolbox: {
          show: false
        },
        lableLine: {
          normal: {
            show: false
          }
        },
        grid: {
          left: 100,
          top: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          show: true,
          top: '70%',
          left: 'center',
          // right: 20,
          orient: 'vertical'
          // data: this.nameList
        },
        // color: ['#36A2EB', '#EBEEF5'],
        series: [
          {
            // name: '科目',
            type: 'pie',
            radius: '65%',
            selectedMode: 'single',
            center: ['50%', '40%'],
            // avoidLabelOverlap: false,
            // label: {
            //   normal: {
            //     show: true,
            //     position: 'center'
            //   },
            //   emphasis: {
            //     show: true,
            //     textStyle: {
            //       fontSize: '30',
            //       fontWeight: 'bold'
            //     }
            //   }
            // },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: newData.map((v, i) => {
              return {
                name: this.nameList[i],
                value: v
              }
            })
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
  .chart {
    width: 320px;
    height: 500px;
    display: inline-block;
  }
</style>
